<template>
  <div class="home">
    <nav-bar class="home-nav">
      <div slot="center">溯源管理</div>
      <span class="right" slot="right">
        <router-link to="/scan" tag="span" class="scan_box">
        <van-icon name="scan" size="30"/>
          </router-link>
      </span>
    </nav-bar>
    <div class="baseView">
      <div class="baseWrapper">
        <van-field
          readonly
          clickable
          name="picker"
          :value="value"
          label=""
          left-icon="location-o"
          right-icon="arrow-down"
          size="large"
          placeholder="切换基地"
          @click="showPicker = true"
        />
        <!--          <template #extra>-->
        <!--            <div>切换基地</div>-->
        <!--          </template>-->

      </div>
      <van-popup v-model="showPicker" position="bottom">
        <van-picker
          show-toolbar
          :columns="baseLists"
          @confirm="onConfirm"
          @cancel="showPicker = false"
        />
      </van-popup>
    </div>

    <weather></weather>

    <div class="container">
      <div class="column-title"><i class="left_line"></i>视频直播</div>
      <div class="video_show">
        <video id="myVideo" class="video-js vjs-default-skin vjs-big-play-centered vjs-16-9" controls preload="auto"
               poster="@/assets/images/poster.jpg"
        >
          <source type="application/x-mpegURL">
        </video>
      </div>
    </div>

    <div class="monitor">
      <div class="container">
        <div class="column-title"><i class="left_line"></i>实时监测</div>
        <!--ehcarts图标区域-->
       <RealTimeData></RealTimeData>
        <!--ehcarts图标区域-->
      </div>
    </div>

    <tab-bar :active="0"></tab-bar>
  </div>
</template>

<script>
  import echarts from 'echarts';
  import tabBar from '@/components/content/tabBar';
  import NavBar from "@/components/common/navbar/NavBar";
  import RealTimeData from '../../components/common/dataobserve/RealTimeData'
  // import baseView from "./childComps/baseView";
  import weather from "./childComps/weather";

  import videojs from 'video.js'
  import 'videojs-contrib-hls'

  export default {
    name: "index",
    components: {
      tabBar,
      NavBar,
      weather,
      RealTimeData
    },
    data() {
      return {
        temperature:'',
        wet:'',
        pm:'',
        cloud:'',
        direction:'',
        soil:'',
        light:'',
        myDate: '',
        codeUrl: '',
        value: '',
        base_id: 0,
        baseLists: [],
        showPicker: false,
        myPlayer: null,
        playOptions: {
          controls: true,
          sources: [
            {
              type: 'application/x-mpegURL',
              src: '',
            }
          ],
          controlBar: {                     // 配置控制栏
            timeDivider: false, // 时间分割线
            durationDisplay: true, // 总时间
            progressControl: false, // 进度条
            customControlSpacer: false, // 未知
            fullscreenToggle: true // 全屏
          },
          //自动播放属性,muted:静音播放
          autoplay: "false",
          preload: "auto",
        },

      }
    },

    created() {
      var myDates = new Date();
      this.myDate = myDates.toLocaleString();        //获取日期与时间

      this.getBaseLists();
    },

    mounted() {
      // this.initVideo();
    },

    destroyed() {
      this.myPlayer.dispose()
    },

    methods: {
      getVideoSrc() {
        let that = this;
        that.$http.get('/api/MobileAadminApi/getBaseLive', {base_id: that.base_id}, r => {
          console.log('视频', r)
           that.playOptions.sources[0].src = r.data.video_addr;
         // that.playOptions.sources[0].src = "http://118.178.224.31:1936/live/livestream/1.m3u8"
          this.initVideo();
        })
      },

      initVideo() {
        //初始化视频方法
        this.myPlayer = videojs(myVideo, this.playOptions);
      },

      onConfirm(value) {
        this.value = value.text;
        this.base_id = value.base_id;
        //Util.storage.set('base_id', value.base_id)
        this.showPicker = false;
        console.log('base_id', this.base_id)
      },

      getBaseLists() {
        let that = this;
        that.$http.get('/api/MobileAadminApi/getBase', null, r => {
          console.log('基地结果：', r);
          that.value = r.data[0].name;
          that.base_id = r.data[0].id;

          // Util.storage.set('base_id', r.data[0].id);
          console.log('基地名称', that.value);
          console.log('基地ID', that.base_id);
          that.getVideoSrc();

          that.creatTemperature();
          that.creatWet();
          that.creatPm();
          that.creatCloud();
          that.creatDirection();
          that.creatSoil();
          that.creatLight();

          let baseArr = [];
          r.data.map(item => {
            let baseObj = {};
            baseObj['base_id'] = item.id;
            baseObj['text'] = item.name
            baseArr.push(baseObj);
            return baseArr;
          })
          this.baseLists = baseArr;
          console.log('基地数组', baseArr)
        })
      },

      creatTemperature() {
        let that = this;
        console.log('调用时base_id', this.base_id)
        this.$http.get("/api/UserCheckApi/getEquipmentNow?base_id=" + that.base_id + "&type=2", null, r => {
         console.log('温度',r)
          that.temperature = parseFloat(r.data.sources,1);
        });

      },
      creatWet() {
        let that = this;
        this.$http.get("/api/UserCheckApi/getEquipmentNow?base_id=" + this.base_id + "&type=3", null, r => {
          that.wet = parseFloat(r.data.sources,1);
        });

      },
      creatPm() {
        let that = this;
        this.$http.get("/api/UserCheckApi/getEquipmentNow?base_id=" + this.base_id + "&type=7", null, r => {
           that.pm = parseFloat(r.data.sources*100);
        });
      },
      creatCloud() {
        let that = this;
        this.$http.get("/api/UserCheckApi/getEquipmentNow?base_id=" + this.base_id + "&type=5", null, r => {
          console.log('风速',r)
          that.cloud = parseFloat(r.data.sources,1);
        });
      },
      creatDirection() {
         let that = this;
        this.$http.get("/api/UserCheckApi/getEquipmentNow?base_id=" + this.base_id + "&type=4", null, r => {
          switch (r.data.sources) {
            case '1':
              that.direction = '北'
              break;
            case '2':
              that.direction = '东北'
              break;
            case '3':
              that.direction = '东'
              break;
            case '4':
              that.direction = '东南'
              break;
            case '5':
              that.direction = '南'
              break;
            case '6':
              that.direction = '西南'
              break;
            case '7':
              that.direction = '西'
              break;
            default:
              that.direction = '西北'
          }
        });
      },
      creatSoil() {
        let that =this;
        this.$http.get("/api/UserCheckApi/getEquipmentNow?base_id=" + this.base_id + "&type=6", null, r => {
          that.soil = parseInt(parseFloat(r.data.sources*100));
        });
      },
      creatLight() {
        let that = this;
        this.$http.get("/api/UserCheckApi/getEquipmentNow?base_id=" + this.base_id + "&type=8", null, r => {
          that.light = parseFloat(r.data.sources,1);
        });

      },


    }
  }
</script>

<style scoped>
  .real_time_data{
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
  }
  .real_item{
    width:2rem;
    height: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    margin: 9px 0;
    background: #f5f5f5;
    border-radius: 7px;
    box-shadow: 1px 1px 5px rgba(0,0,0,.2);
  }
  .real_name{
    font-size: .36rem;
  }
  .real_data{
    font-size: .46rem;
    font-weight: bold;
  }
  .unit{
    font-size: .32rem;
    color:#999;
  }

  .home {
    padding-top: .9rem;
    padding-bottom: .9rem;
  }

  .scan_box {
    display: flex;
  }

  .data_observe {
    width: 100%;
    box-sizing: border-box;
    padding-bottom: 10px;
  }

  .charts {
    height: 686px;
    width: 100%;
    background: white;
    border-radius: 6px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
  }

  .date {
    margin-bottom: 15px;
    font-size: .3rem;
    color: #000000;
  }

  .chart_list {
    flex: 1;
    display: flex;
    flex-direction: column;
  }

  .chart {
    flex: 1;
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
  }

  .chart_left{
    flex: 1;
    display: flex;
    flex-direction: column;
    /*width:40%*/
  }

  .text {
    height: .4rem;
    font-size: .28rem;
    font-family: "Adobe 黑体 Std R";
    color: black;
    text-align: center;
  }

  .chart_right {
    flex: 1;
    display: flex;
    flex-direction: column;
    /*width:40%*/
  }

  .baseWrapper >>> .van-cell {
    padding: 10px 15px;
    background-color: #fbfbfb;
    font-size: .3rem;
  }

  /*.baseWrapper >>> .van-field__control{*/
  /*  font-size: .32rem;*/
  /*}*/

  .video_show >>> .video-js,  .video_show >>> .vjs-poster{
    background-color: #fff;
  }



  /*改版传感器样式*/



  /*改版传感器样式*/

</style>
